<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影</title>
    <style>
        h2{
            font-family: "宋体";
            font-size: 32px;
            color: rgb(255, 94, 0);
        }

         .movie h2 span{
            font-size: 24px;
            float: right;
        }
        /* 购票 */
        .movie #above #one #one-shop{
            width: 160px;
            height: 30px;
            text-align: center;
            color: rgb(255, 94, 0);
            position: relative;
            bottom: 40px;
        }
        .movie #above #two #two-shop{
            width: 160px;
            height: 30px;
            text-align: center;
            color: rgb(255, 94, 0);
            position: relative;
            bottom: 10px;
        }
        .movie #above #three #three-shop{
            width: 160px;
            height: 30px;
            text-align: center;
            color: rgb(255, 94, 0);
            position: relative;
            bottom: 40px;
        }
        .movie #above #four #four-shop{
            width: 160px;
            height: 30px;
            text-align: center;
            color: rgb(255, 94, 0);
            position: relative;
            bottom: 40px;
        }
        /* 鼠标悬挂是购票 */
        .movie #above #one #one-shop:hover{
            color: aliceblue;
            background-color: rgb(255, 94, 0);
            text-align: center;
        }
        .movie #above #two #two-shop:hover{
            color: aliceblue;
            background-color: rgb(255, 94, 0);
            text-align: center;
        }
        .movie #above #three #three-shop:hover{
            color: aliceblue;
            background-color: rgb(255, 94, 0);
            text-align: center;
        }
        .movie #above #four #four-shop:hover{
            color: aliceblue;
            background-color: rgb(255, 94, 0);
            text-align: center;
        }
        /* 左上角logo */
        .movie #above #one #one-twopicture{
          position: relative;
          bottom: 225px;
        }
        .movie #above #three #three-twopicture{
            position: relative;
            bottom: 225px;
        }
        .movie #above #four #four-twopicture{
            position: relative;
            bottom: 225px;
        }
        #one{
            float: left;
        }

        #two{
            float: left;
            margin-left: 30px;
            margin-right: 30px;
            position: relative;
            right: 5px;
        }
        #three{
            float: left;
            margin-right: 30px;
            position: relative;

        }
        #four{
            float: left;
        }
    </style>
</head>
<body>
    <div class="movie">
        <h2>正在热映（26部）<span>全部></span></h2>
        <div id="above">
            <div id="one">
                <img  src="movie/m1.jpg"><br>
                <img id="one-twopicture" src="movie/2dmax.png">
                <p id="one-shop">购票</p>
            </div>

            <div id="two">
                <img id="two-onepicture" src="movie/m2.jpg"><br>
                <p id="two-shop">购票</p>
            </div> 

            <div id="three">
                <img src="movie/m3.jpg"><br>
                <img id="three-twopicture" src="movie/2dmax.png">
                <p id="three-shop">购票</p>
            </div>

            <div id="four">
                <img src="movie/m4.jpg"><br>
                <img id="four-twopicture" src="movie/2dmax.png">
                <p id="four-shop">购票</p>
            </div>

        </div>
    </div>
</body>
</html>